{include file="layout/myHeader" /}
    <div id="app">
        <table class="table table-striped table-bordered table-hover table-nowrap">
            <thead>
                <th>名称(ch)</th>
                <th>名称(en)</th>
                <th>URL</th>
                <th>备注</th>
                <th>状态</th>
                <th>OP</th>
            </thead>
            <tbody>
                <tr v-for="data in dataList">
                    <td>{{data.title}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.url}}</td>
                    <td>{{data.remark}}</td>
                    <td>{{!!data.status?'启用':'禁用'}}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-success" v-if="!!!data.status"
                                @click="setStatus(data.id,1)">启用</button>
                        <button type="button" class="btn btn-sm btn-danger" v-if="!!data.status"
                                @click="setStatus(data.id,0)"
                        >禁用</button>
                        <button type="button" @click="editOne(data)" class="btn btn-sm van-icon-edit">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="pager" v-if="editData">
            <form id="myForm" class="form bg-gray-light col-md-6 col-md-offset-3" :action="actionUpload" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <b>要求MP4,大小限制25M</b>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">{{editData.title}}</div>
                        <input type="text" name="name" class="form-control"
                               readonly
                               style="display: none"
                               :value="editData.name">
                        <input type="file"
                               name="video"
                               id="inputfile"
                               class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-5">
                            <button :disabled="isUploading" class="btn-block btn btn-primary" @click="upload">
                                <span v-if="isUploading">上传中，请稍等</span>
                                <span v-else>上传</span>
                            </button>
                        </div>
                        <div class="col-md-5 col-md-offset-2">
                            <button type="button" class="btn-block btn btn-default" @click="closeDo">关闭</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
{include file="layout/myFooter" /}

<script>
    $(function(){
        let app = new Vue({
            el:"#app",
            data:{
                backUrlPreFix:"/JPZpewDLTY.php",
                dataList:null,
                editData:null,
                isUploading:false
            },
            computed:{
                actionUpload(){
                    return this.backUrlPreFix+"/video/manager/upload"
                }
            },
            mounted(){
                this.getDataList()
            },
            methods:{
                closeDo(){
                    this.editData=null
                },
                setStatus(id,status){
                    let _this=this
                    $.post(this.backUrlPreFix+"/video/manager/setStatus",{id,status},(res)=>{
                        if (res.status){
                            _this.dataList.forEach(item=>{
                                if (item.id == id)item.status=status
                            })
                        }
                    })
                },
                editOne(d){
                    let _this=this
                    _this.editData = d
                },
                upload(){
                    let _this=this
                    _this.isUploading=true
                    $("#myForm").submit()
                },
                getDataList(){
                    let _this=this
                    $.post(_this.backUrlPreFix+"/video/manager/index",function (res) {
                        if (res.status){
                            _this.dataList = res.data
                        }
                    })
                }
            }
        })


    })
</script>